<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// 示例文章数据，实际项目中应该从API获取
const articles = ref([
  {
    id: 1,
    title: 'Python进阶：如何优雅地使用装饰器',
    author: '张教授',
    avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
    date: '2023-09-15',
    views: 2456,
    likes: 389,
    summary: '装饰器是Python中非常强大的特性，本文将深入探讨如何在实际项目中灵活运用装饰器模式...'
  },
  {
    id: 2,
    title: '初学者必看：JavaScript异步编程完全指南',
    author: '李讲师',
    avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
    date: '2023-08-28',
    views: 1892,
    likes: 276,
    summary: '从回调函数到Promise，再到async/await，一步步掌握JavaScript中的异步编程技巧...'
  },
  {
    id: 3,
    title: '高效数据结构：为什么你应该使用哈希表',
    author: '王工程师',
    avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
    date: '2023-07-19',
    views: 3214,
    likes: 452,
    summary: '哈希表是一种高效的数据结构，本文将详细介绍其工作原理及实际应用场景...'
  }
]);

const navigateToArticle = (articleId: any) => {
  router.push({
    path: '/community/article',
    query: { id: articleId }
  });
};
</script>

<template>
  <div class="article-container">
    <div 
      v-for="article in articles" 
      :key="article.id" 
      class="article-card hover-card"
      @click="navigateToArticle(article.id)"
    >
      <div class="article-content">
        <h3 class="article-title">{{ article.title }}</h3>
        <p class="article-summary">{{ article.summary }}</p>
        <div class="article-meta">
          <div class="author">
            <img :src="article.avatar" :alt="article.author" class="author-avatar">
            <span>{{ article.author }}</span>
          </div>
          <div class="stats">
            <span class="time">{{ article.date }}</span>
            <span class="views">
              <van-icon name="eye-o" />
              {{ article.views }}
            </span>
            <span class="likes">
              <van-icon name="like-o" />
              {{ article.likes }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.article-container {
  display: flex;
  flex-direction: column;
  gap: 16px;

  .article-card {
    background-color: #fff;
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    
    .article-title {
      margin: 0 0 12px;
      font-size: 16px;
      font-weight: 600;
      color: #323233;
    }
    
    .article-summary {
      margin: 0 0 16px;
      font-size: 14px;
      color: #646566;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      line-height: 1.5;
    }
    
    .article-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      color: #969799;
      
      .author {
        display: flex;
        align-items: center;
        
        .author-avatar {
          width: 24px;
          height: 24px;
          border-radius: 50%;
          margin-right: 8px;
          object-fit: cover;
        }
      }
      
      .stats {
        display: flex;
        gap: 12px;
        
        .time, .views, .likes {
          display: flex;
          align-items: center;
          
          .van-icon {
            margin-right: 4px;
            font-size: 14px;
          }
        }
      }
    }
    
    &:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    }
  }
}

// 响应式适配
@media (max-width: 480px) {
  .article-container .article-card {
    .article-meta {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }
  }
}
</style>